<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator="/" style="margin-bottom: 20px;">
			<el-breadcrumb-item :to="{ path: '/webhome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>小区管理</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 搜索框 -->
		<el-row>
			<el-form :inline="true">
				<el-form-item label="小区名称:">
					<el-input clearable @clear="getCommunityList()" v-model="sousuoinfo.communityName"
						placeholder="请输入小区名称"></el-input>
				</el-form-item>
				<el-form-item label="创建日期:">
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>

				<!-- 搜索按钮 -->
				<el-form-item>
					<el-button type="primary" @click="seach"
						style="background-color: khaki; border: none;">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-row>

		<!-- 新增小区按钮 -->
		<el-button class="eb" type="primary" style="margin-bottom: 20px;" @click="addCommunity">新增小区</el-button>

		<!-- 表格数据 -->

		<el-table stripe :data="communityList" style="width: 100%" :header-cell-style="{backgroundColor: '#f8f8f8'}">
			<el-table-column prop="communityId" label="ID">
			</el-table-column>
			<el-table-column prop="communityName" label="名称">
			</el-table-column>
			<el-table-column prop="communityAddress" label="地址">
			</el-table-column>
			<el-table-column prop="communityShopCount" label="关联门店">
			</el-table-column>
			<el-table-column prop="createTime" label="时间">
			</el-table-column>
			<el-table-column prop="" label="操作">
				<template slot-scope='scope'>
					<!-- 查看关联门店 -->
					&nbsp;&nbsp;&nbsp;&nbsp;
					<el-link :underline="false" type="success"
						@click="showStore(scope.row.communityId)">查看关联门店</el-link><br />


					<el-link :underline="false" type="primary"
						@click="changeCommunity(scope.row)">编辑小区</el-link>&nbsp;&nbsp;
					<el-link :underline="false" type="danger"
						@click="deleteCommunity(scope.row.communityId)">删除小区</el-link>
				</template>
			</el-table-column>
		</el-table>

		<!-- 页码 -->

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="sousuoinfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="sousuoinfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 20px;">
		</el-pagination>


		<!-- 增加或修改小区 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancel">
			<el-form :model="communityData">
				<el-form-item label="" label-width="120px">
					<el-input v-model="communityData.communityName"></el-input>
				</el-form-item>

				<!-- 级联样式 -->
				<el-form-item label="所属地区" label-width="120px">
					<el-cascader placeholder="请输入地区" :options="citys" filterable v-model="address"></el-cascader>
				</el-form-item>

				<!-- 详细地址 -->
				<el-form-item label-width="120px">
					<el-input v-model="communityData.communityAddress"></el-input>
				</el-form-item>

				<!-- 获取位置 -->
				<el-form-item label="小区坐标" label-width="120px">
					<el-button type="primary" @click="getCommunityLocation">获取坐标</el-button>
					<span
						v-show="communityData.communityLongitude">{{communityData.communityLongitude}},{{communityData.communityLatitude}}</span>
				</el-form-item>
			</el-form>

			<!-- 保存或取消添加小区信息 -->
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="update">确 定</el-button>
			</div>
		</el-dialog>




		<!-- 查看关联门店弹出框 -->
		<el-dialog title="查看关联门店" :visible.sync="seeDialogFormVisible">

			<el-form :inline="true">
				<el-form-item label="">
					<el-input clearable @clear="showStore(communityId)" v-model="aboutCommunityInfo.shopName"
						placeholder="请输入小区名称"></el-input>
				</el-form-item>

				<!-- 搜索按钮 -->
				<el-form-item>
					<el-button type="primary" @click="showStore(communityId)"
						style="background-color: khaki; border: none;">搜索</el-button>
				</el-form-item>

				<!-- 添加关联门店按钮 -->
				<el-form-item>
					<el-button type="primary" style="background-color: khaki; border: none;"
						@click="toAddStore">添加关联门店</el-button>
				</el-form-item>
			</el-form>

			<!-- 制做关联门店表格 -->
			<el-table stripe :data="aboutCommunity" style="width: 100%"
				:header-cell-style="{backgroundColor: '#f8f8f8'}">
				<el-table-column prop="shopId" label="ID">
				</el-table-column>
				<el-table-column prop="shopName" label="名称">
				</el-table-column>
				<el-table-column prop="shopAddress" label="地址">
				</el-table-column>
				<el-table-column prop="shopOrderCount" label="订单数量">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope='scope'>
					<el-link :underline="false" type="danger" @click="deleteStore(scope.row.shopId)">删除</el-link>
				</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<el-pagination class="fenye" @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
				:current-page="aboutCommunityInfo.pageNum" :page-sizes="[5, 10, 15, 20]"
				:page-size="aboutCommunityInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="storeTotal" style="margin-top: 20px;">
			</el-pagination>

			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelShowStore">取 消</el-button>
			</div>
		</el-dialog>



		<!-- 添加关联门店 -->
		<el-dialog title="添加关联门店" :visible.sync="DialogStoreVisible">

			<el-form :inline="true">
				<el-form-item label="">
					<el-input placeholder="请输入门店名称" @clear="toAddStore(communityId)" clearable v-model="addCommunityInfo.shopName"></el-input>
				</el-form-item>

				<!-- 搜索按钮 -->
				<el-form-item>
					<el-button @click="toAddStore()" type="primary" style="background-color: khaki; border: none;" >搜索</el-button>
				</el-form-item>


			</el-form>

			<!-- 制做添加关联门店表格 -->
			<el-table @selection-change="handleSelectionChange" stripe :data="storeList" style="width: 100%"
				:header-cell-style="{backgroundColor: '#f8f8f8'}">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="shopId" label="ID">
				</el-table-column>
				<el-table-column prop="shopName" label="名称">
				</el-table-column>
				<el-table-column prop="shopAddress" label="地址">
				</el-table-column>
				<el-table-column prop="shopOrderCount" label="订单数量">
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<el-pagination class="fenye2" @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
				:current-page="addCommunityInfo.pageNum" :page-sizes="[5, 10, 15, 20]"
				:page-size="addCommunityInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="addStoreTotal" style="margin-top: 20px;">
			</el-pagination>

			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelAddStore">取 消</el-button>
				<el-button @click="addStore">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				//定义一个空数组接受选择门店的id号
				multipleSelection: [],


				//添加关联门店对话框显隐
				DialogStoreVisible: false,

				//数据总数
				addStoreTotal: 1,

				//接收添加关联小区调接口中的对象空集合
				storeList: [],

				//添加关联小区调接口中的对象
				addCommunityInfo: {
					pageNum: 1,
					pageSize: 5,
					shopName: '',
					communityId: '',
				},

				//定义获取数据的总条数
				storeTotal: 1,

				//定义一个全局小区ID
				communityId: '',

				//定义空数组接受调接口获得的对象集合
				aboutCommunity: [],

				//查看关联小区调接口中的对象
				aboutCommunityInfo: {
					pageNum: 1,
					pageSize: 5,
					shopName: '',
					communityId: '',
				},


				//查看关联小区弹出框
				seeDialogFormVisible: false,

				title: '新增小区',
				citys: citys,
				communityData: { // 小区信息
					addOrUpdateFlag: 1, // 判断是新增还是修改的标志  1:新增  2：修改
					communityAddress: "", // 小区详细地址
					communityAreaCode: "", // 小区位置编码
					communityCity: "", // 小区所属城市
					communityCoordinates: "", // 小区所属详细地址--
					communityDistrict: "", // 小区所属区域 
					communityId: "", // 小区编号
					communityLatitude: "", // 小区纬度
					communityLongitude: "", // 小区经度
					communityName: "", // 小区名称
					communityProvince: "", // 小区所属省份/直辖市
				},
				dialogFormVisible: false,
				sousuoinfo: {
					// name: '',
					pageNum: 1,
					pageSize: 5,
					startTime: '',
					endTime: '',
					communityName: ''
				},
				date: '',
				total: 1,
				communityList: [],
				address: []
			}
		},
		methods: {
			//删除关联门店
			deleteStore(id){
				this.$http.post('associatedStores/associatedStoresRemove', {
						panghuShopId: id,
						panghuCommunityId:this.communityId,
					})
					.then(res => {
						if(res.data.status==200){	
							this.getCommunityList()
							this.seeDialogFormVisible=false
							this.$message.success('删除成功!')
						}else{
							this.$message.error('删除失败!')
						}
					})
			},
			
			//取消查看关联门店
			cancelShowStore(){
				this.seeDialogFormVisible=false
				this.aboutCommunityInfo.shopName=''
			},
			
			//取消添加关联门店
			cancelAddStore(){
				this.DialogStoreVisible=false
				this.addCommunityInfo.shopName=''
			},
			
			//确定保存关联门店
			addStore() {
				let idList = []
				for (let s of this.multipleSelection) {
					idList.push(s.shopId)
				}
				
				this.$http.post('associatedStores/addAssociatedStores', {
						fendeShopCommunityList: idList,
						panghuCommunityId:this.communityId,

					})
					.then(res => {
						if(res.data.status==200){
							
							this.getCommunityList()
							this.DialogStoreVisible = false
							this.$message.success('添加成功!')
						}else{
							this.$message.error('添加失败!')
						}
					})


			},

			//表格前多选按钮
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},


			//分页
			handleCurrentChange2(num) {
				this.addCommunityInfo.pageNum = num
				this.toAddStore()
			},


			//展示条数函数
			handleSizeChange2(size) {
				this.addCommunityInfo.pageSize = size
				this.addCommunityInfo.pageNum = 1
				this.toAddStore()
			},

			//添加关联门店
			toAddStore() {
				this.seeDialogFormVisible = false
				this.DialogStoreVisible = true
				this.$http.get('associatedStores/findShopListByAdd', {
						params: this.addCommunityInfo
					})
					.then(res => {
						if (res.data.status == 200) {
							this.storeList = res.data.data.list
							this.addStoreTotal = res.data.data.total
						} else {
							this.$message.error('服务器接口错误!')
						}
					})
			},


			//改变第几页的函数
			handleCurrentChange1(num) {
				this.aboutCommunityInfo.pageNum = num
				this.showStore(this.communityId)
			},


			//展示条数函数
			handleSizeChange1(size) {
				this.aboutCommunityInfo.pageSize = size
				this.aboutCommunityInfo.pageNum = 1
				this.showStore(this.communityId)
			},



			//点击展示关联门店
			showStore(id) {
				this.communityId = id
				this.aboutCommunityInfo.communityId = id


				this.$http.get('associatedStores/associatedStoresList', {
						params: this.aboutCommunityInfo
					})
					.then(res => {
						if (res.data.status == 200) {
							this.seeDialogFormVisible = true
							this.aboutCommunity = res.data.data.list
							this.storeTotal = res.data.data.total
						} else {
							this.$message.error('服务器接口错误!')
						}
					})
			},


			//查看关联门店
			lookStore(row) {
				this.seeDialogFormVisible = true
				this.showStore(row)
				row.communityId = ''
			},


			//删除小区
			deleteCommunity(communityId) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post('community/communityRemove', {
							'communityId': communityId
						})
						.then(res => {
							if (res.data.status == 200) {
								this.$message.success('删除成功!')
								this.getCommunityList()
							} else {
								this.$message.error('删除失败!')
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},


			//编辑小区
			changeCommunity(row) {
				this.dialogFormVisible = true
				this.title = '编辑小区'
				this.communityData = row
				this.communityData.addOrUpdateFlag = 2
				this.address = [this.communityData.communityProvince, this.communityData.communityCity, this.communityData
					.communityDistrict
				]
			},

			//取消添加
			cancel() {
				this.dialogFormVisible = false
				this.communityData = { // 小区信息
					addOrUpdateFlag: 1, // 判断是新增还是修改的标志  1:新增  2：修改
					communityAddress: "", // 小区详细地址
					communityAreaCode: "", // 小区位置编码
					communityCity: "", // 小区所属城市
					communityCoordinates: "", // 小区所属详细地址--
					communityDistrict: "", // 小区所属区域 
					communityId: "", // 小区编号
					communityLatitude: "", // 小区纬度
					communityLongitude: "", // 小区经度
					communityName: "", // 小区名称
					communityProvince: "", // 小区所属省份/直辖市
				}
				this.getCommunityList()
				this.address = []
			},


			//确定添加
			update() {
				this.$http.post('community/communityUpdate', this.communityData)
					.then(res => {
						this.$message.success('操作成功!')
						this.cancel()
					})
			},

			//获取坐标
			getCommunityLocation() {
				// let address = '河南省郑州市雪松路'
				// let address = this.address.toString()
				// let address = this.community.communityProvince+this.community.communityCity+this.community.communityDistrict+this.community.communityAddress
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
						params: {
							key: '457886b5972a97e93fb9cdccebfd450f',
							address: this.communityData.communityProvince + this.communityData.communityCity + this
								.communityData.communityDistrict + this.communityData.communityAddress
						}
					})
					.then(resp => {
						if (!this.communityData.communityProvince) {
							this.$message.error('请输入省市区')
							return false
						}
						// console.log(res.data.geocodes[0].location)
						let location = resp.data.geocodes[0].location
						//console.log(location)
						this.communityData.communityLatitude = location.split(',')[0]
						this.communityData.communityLongitude = location.split(',')[1]

					})
			},


			//获取小区信息集合制表
			getCommunityList() {
				this.$http.get('community/communityList', {
						params: this.sousuoinfo
					})
					.then(res => {
						// console.log(res.data)
						if (res.data.status == 200) {
							this.communityList = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message.error('服务器接口错误!')
						}
					})
					.catch(error => {
						this.$message.error('服务器接口错误!')
					})
			},


			// 分页函数
			handleCurrentChange(num) {
				this.sousuoinfo.pageNum = num
				this.getCommunityList()
			},


			//展示条数函数
			handleSizeChange(size) {
				this.sousuoinfo.pageSize = size
				this.sousuoinfo.pageNum = 1
				this.getCommunityList()
			},

			//小区名字模糊查询函数
			seach() {
				this.getCommunityList()
			},

			//新增小区
			addCommunity() {
				this.dialogFormVisible = true
			}

		},

		//页面加载完成展示表格数据
		mounted() {
			this.getCommunityList()
		},

		//watch侦听器--当日期被选择后才会吧两个日期拆分成两个数组
		watch: {
			date() {
				if (this.date) {
					this.sousuoinfo.startTime = this.date[0]
					this.sousuoinfo.endTime = this.date[1]
				} else {
					this.sousuoinfo.startTime = ''
					this.sousuoinfo.endTime = ''
				}
			},
			address() {
				// console.log(this.address);
				this.communityData.communityProvince = this.address[0];
				this.communityData.communityCity = this.address[1];
				this.communityData.communityDistrict = this.address[2];
			}
		}

	}
</script>

<style>
	.el-pagination {
		margin-left: 300px;
	}

	.eb {
		background-color: khaki;
		border: none;
	}

	.el-table-column {
		background-color: khaki;
	}

	.fenye {
		margin-left: 130px;
	}

	.fenye2 {
		margin-left: 10px;
	}
</style>